<!--胜负彩 -- 选号页面 -->
<template>
	<view>
		<uni-collapse>
			<uni-collapse-item titleBorder="none">
				<template v-slot:title>
					<view class="collapse-item">
						<view class="collapse-item-title">
							<text>截止时间：2025-04-15 20:55:00</text>
							<text class="cicon-drop-down" style="font-size: 25px;" />
						</view>
					</view>
				</template>
				<view class="content">
					<view class="text">折叠内容主体，可自定义内容及样式</view>
				<view class="text">折叠内容主体，可自定义内容及样式</view>
				<view class="text">折叠内容主体，可自定义内容及样式</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<view class="xuanhao">
			<view class="xitem" v-for="i in 14">
				<view class="xitem-left">
					<view>1</view>
					<view>英超</view>
					<view class="fenxi">
						<text>分析</text>
						<text class="cicon-drop-down" style="font-size: 25px;" />
					</view>
				</view>
				<view class="xitem-content">
					<view class="xuan x3 select-data">
						<view>
							<text class="data-ming">[2]</text>
							<text class="data-name">曼城</text>
						</view>
						<view>
							<text class="data-pei">1.98</text>
						</view>
					</view>
					<view class="xuan">
						<view>
							<text class="data-name">平</text>
						</view>
						<view>
							<text class="data-pei">1.98</text>
						</view>
						
					</view>
					<view class="xuan x0">
						<view>
							<text class="data-name">西汉姆联</text>
							<text class="data-ming">[2]</text>
						</view>
						<view>
							<text class="data-pei">1.98</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	const props = defineProps({
		item: {
			type: Object,
			default () {},
		},
	});
	const state = reactive({
		currentTab: 0,
	});
	const tabMaps = [{
			name: '定位复式',
			value: 0,
		},
		{
			name: '组合复式',
			value: 1,
		},
		{
			name: '和值',
			value: 2,
		}, {
			name: '组合胆拖',
			value: 3,
		}, {
			name: '跨度复式',
			value: 4,
		}
	];
	// 切换选项卡
	function onTabsChange(e) {
		state.currentTab = e.index;
		console.log(e.index)
	}
</script>

<style lang="scss" scoped>
	.collapse-item-title {
		width: 100vw;
		height: 29px;
		line-height: 29px;
		background: #fbe5e5;
		padding-left: 15px;
		padding-right: 15px;
		font-size: 13px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
	}
	.xuanhao{
		background-color: #ebebeb;
		text-align: center;
	}
	.xitem{
		display: flex;
		justify-content: space-evenly;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
	}
	.xitem-left{
		font-size: 10px;
		border-bottom: 1px solid #bfbfbf;
		border-radius: 10px;
		padding: 0 10px;
		
	}
	.xitem-content{
		display: flex;
		justify-content: space-evenly;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center
		
	}
	.xuan{
		background-color: #fafafa;
		border:1px solid #bfbfbf;
		height: 56px;
		margin: 5px 1px;
		width: 90px;
	}
	.x3{
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	.x0{
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	.data-ming{
		color: #bababa;
		font-size: 10px;
		margin-left: 2px;
		margin-right: 2px;
	}
	.data-name{
		font-size: 14px;
	}
	.data-pei{
		color: #bababa;
		font-size: 10px;
	}
	.fenxi{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center
	}
	.select-data {
		background-color: #fc3123;
	}
	.select-data text{
		color: #f5f5f5;
	}

</style>